<template>
  <div class="header">
    <div>
      <OrderQueryTop v-model:title='title' ref="queryRef" @queryClick="inquiry" @resettingClick = 'resetting'/>
    </div>
    <div>
      <el-card class="box-card">
        <template #header>
          <div class="customerTitle1">
            <span class="titleHead1" >订单列表</span>
            <div >
<!--              <el-button
                class="customerButton1"
                plain
                size="small"
                type="primary"
                @click="upData"
              >
                变更
              </el-button>-->
              <el-button
                class="customerButton1"
                plain
                type="primary"
                @click="publicPopup(2)"
              >
                地址更新
              </el-button>
              <el-button
                plain
                type="primary"
                @click="publicPopup(1)"
              >
                确认收货
              </el-button>
<!--              <el-button
                class="customerButton1"
                plain
                size="small"
                type="primary"
                @click="copyList"
              >
                复制
              </el-button>-->
              <el-button
                class="customerButton1"
                plain
                type="primary"
                @click="cancellation"
              >
                订单取消
              </el-button>
<!--              <el-button size="small" type="primary" @click="create">
                新建
              </el-button>-->
            </div>
          </div>
        </template>
        <div>
          <el-table
            v-loading="loading"
            load="false"
            ref="multipleTableRef"
            :data="customer_order_list"
            height="450px"
            style="width: 100%"
            @sort-change="sortList"
            :tooltip-options="{ enterable: true, placement: 'top' }"
            tooltip-effect="dark"
          >
            <el-table-column  align="center" width="40" fixed="left" show-overflow-tooltip>
              <template #default="scope">
              <div class="table_style">
                <label class="el-checkbox"
                       :class="{ 'is-checked': radioIndex && radioIndex.id === scope.row.id }"
                       @click="handleRadio(scope.row)"
                >
                  <span class="el-checkbox__input" :class="{ 'is-checked':  radioIndex && radioIndex.id === scope.row.id  }"><span class="el-checkbox__inner"></span></span>
                </label>
              </div>
              </template>
            </el-table-column>
            <el-table-column label="序号" align="center" width="80" fixed="left" show-overflow-tooltip>
              <template #default="scope">
                <div class="table_style">
<!--                  <label class="el-checkbox"
                         :class="{ 'is-checked': radioIndex && radioIndex.id === scope.row.id }"
                         @click="handleRadio(scope.row)"
                         v-if="scope.row.status != 5"
                  >
                    <span class="el-checkbox__input" :class="{ 'is-checked':  radioIndex && radioIndex.id === scope.row.id  }"><span class="el-checkbox__inner"></span></span>
                  </label>-->
                  <span style="margin-left: 5px"
                        v-text="(currentPage - 1) * pageSize + (scope.$index + 1)"
                  ></span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="订单编号" align="center" width="150" fixed="left" show-overflow-tooltip>
              <template #default="scope">
               <span
                 class="textFont"
                 @click="particulars(scope.row)"
               >
                 {{scope.row.uid || '--' }}
               </span>
              </template>
            </el-table-column>
            <el-table-column label="客户" align="center" min-width="225" show-overflow-tooltip>
              <template #default="scope">
               <span
                 style="text-align: left"
                 v-text="_FieldFormat(scope.row.customer_name,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="销售组织" align="center" width="210" show-overflow-tooltip>
              <template #default="scope">
               <span
                 style="text-align: left"
                 v-text="_FieldFormat(scope.row.sales_org_name,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="单据号" align="center" width="150" show-overflow-tooltip>
              <template #default="scope">
               <span
               >
                 {{scope.row.order_group_uid || '--' }}
               </span>
              </template>
            </el-table-column>
            <el-table-column label="订单流转状态" align="center" width="125">
              <template #default="scope">
               <span
                 class="ellipsis"
                 style="cursor: default;text-align: left "
               >
                  <el-tag
                    :color="colorStatus(scope.row.status_str)"
                    style="color: #fff;border-width: 0"
                  >
                  {{scope.row.status_str || '--'}}
                </el-tag>
               </span>
              </template>
            </el-table-column>
            <el-table-column label="销售数量" align="center" prop="sales_num" width="120" sortable="custom" show-overflow-tooltip>
              <template #default="scope">
               <span
                 class="ellipsis numberMoney"
                 v-text="_FieldFormat(scope.row.sales_num,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="销售金额" align="center" width="120" prop="total_amount" sortable="custom" show-overflow-tooltip>
              <template #default="scope">
               <span
                 class="numberMoney"
               >
                 ￥
                 {{Number(scope.row.total_amount).toFixed(2)}}
               </span>
              </template>
            </el-table-column>
            <el-table-column label="仓库" align="center" width="160" show-overflow-tooltip>
              <template #default="scope">
               <span
                 class="ellipsis"
                 style="text-align: left"
                 v-text="_FieldFormat(scope.row.warehouse_name,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="出库单号" align="center" width="170" show-overflow-tooltip>
              <template #default="scope">
               <span
                 v-text="_FieldFormat(scope.row.stock_out_uid  ,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="订单类型" align="center" width="150">
              <template #default="scope" >
                <span class="tagStatus">
                <el-tag class="ml-2" v-if ="scope.row.type === 1" >标准销售订单</el-tag>
                <el-tag class="ml-2" v-if ="scope.row.type === 2" type="success">寄售订单</el-tag>
                <el-tag class="ml-2" v-if ='scope.row.type === 3' type="warning">样品订单</el-tag>
                </span>
              </template>
            </el-table-column>
            <el-table-column label="售后单号"  width="150" align="center" show-overflow-tooltip>
              <template #default="scope">
                       <span
                         v-for="(items,index) in  objectArray(scope.row.aftersale_uid)"
                         :key="index"
                         class="ellipsis textFont"
                         @click="serviceOrder(items)"
                       >
                         {{items || '--'}}
                       </span>
              </template>
            </el-table-column>
            <el-table-column label="售后状态"  width="120" align="center" show-overflow-tooltip>
              <template #default="scope">
                       <span
                         class="ellipsis "
                         v-text="_FieldFormat(scope.row.aftersale_type, '')"
                       ></span>
              </template>
            </el-table-column>
            <el-table-column label="销售部门" align="center" width="100" show-overflow-tooltip>
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.sales_dept_name,  '')"
               ></span>
             </template>
            </el-table-column>
            <el-table-column label="销售员" align="center" width="100" show-overflow-tooltip>
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.sales_user_name,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="订单创建时间" align="center" width="180" show-overflow-tooltip>
              <template #default="scope">
               <span
                 class="ellipsis number"
                 v-text="_FieldFormat(scope.row.create_time,  '')"
               ></span>
             </template>
            </el-table-column>
            <el-table-column label="最新操作时间" align="center" width="180" show-overflow-tooltip>
              <template #default="scope">
               <span
                 class="ellipsis number"
                 v-text="_FieldFormat(scope.row.update_time,  '')"
               ></span>
             </template>
            </el-table-column>
            <el-table-column label="订单取消时间" align="center" width="180" show-overflow-tooltip>
              <template #default="scope">
                 <span
                   class="ellipsis">
<!--                   {{ scope.row.status == '45' && _FieldFormat(scope.row.update_time,  'time') ||  '&#45;&#45;'}}-->
                   {{_FieldFormat(scope.row.cancel_time,  'time')}}
                 </span>
              </template>
            </el-table-column>
            <el-table-column label="回传状态" align="center" width="120" show-overflow-tooltip>
              <template #default="scope">
                 <span
                   class="ellipsis">
                   {{syncStatus(scope.row.sync_status)}}
                 </span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="120" fixed="right">
              <template #default="scope">
                <el-button link type="primary" @click="particulars(scope.row)">
                  查看详情
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="customerPagination">
          <el-pagination
            background
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            layout="total, prev, pager, next,sizes, jumper"
            :page-sizes="[20, 50, 100, 200]"
            small="small"
            :total="count_number"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          />
        </div>
<!--        //下载按钮-->
<!--        <VabButton update title="下载" @click="upDown"/>-->
      </el-card>
    </div>
     <OrderSelect ref="orderSelectRef" />
    <TakeOver  ref="takeOver" @addressSubmit="addressSubmit" />
    <SetAddress ref="setAddress" @addressSubmit="addressSubmit" />
  </div>
</template>

<script setup lang="ts">

import router from "/@/router";
import OrderSelect from '../component/OrderSelect.vue'
import {handleUploadFile, orderType,objectArray,colorStatus} from '../orderText'
import TakeOver from './component/TakeOver.vue'
import SetAddress from './component/SetAddress.vue'
defineOptions({
  name: 'OrderQuery',
})
import {ref} from "vue";
import OrderQueryTop from '../component/OrderQueryTop.vue'
import {DateFormat, FieldFormat} from "/@/utils/utils";
import {orderCancel, orderExport, orderList} from "/@/api/dms/order";
import dayjs from "dayjs";
import {ElMessage, ElMessageBox} from "element-plus";
import {orderGroupCopy} from "/@/api/dms/order/group";
import {orderConfirmReceipt} from "/@/api/dms/order/confirm";
import * as url from "url";
const _FieldFormat = (value: string, type = '') => {
  return FieldFormat(value, type)
}
//确认收货
const takeOver = ref<any>(undefined)
//更改地址
const setAddress = ref<any>(undefined)
const queryRef = ref<any>({})
const orderSelectRef=ref<any>(null)
const title = ref('订单查询')
const loading=ref(false)
const pageSize = ref(20)
const currentPage = ref(1)
const count_number = ref(0)
const customer_order_list = ref<any>([])
const queryList =ref<any>({})
// 单选
const radioIndex = ref<any>(undefined)
//分页
const upDown = ()=>{
  orderExport({...queryList.value}).then((data:any)=>{
    if(data.code == 200){
      handleUploadFile( data.data.url, `订单${data.data.url.slice(-5)}`)
      ElMessage.success(`导出成功`)
    }
  })
}
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  getOrderList(queryList.value)
}
const handleSizeChange = (val: number) => {
  pageSize.value = val
  getOrderList(queryList.value)
}
// 去处理
const treatment_list=(row:any)=>{
  if(row.type == 3){
    router.push(`/order/quickOrder?path=2&id=${row.order_group_uid}`)
    //用于跳转页面
    localStorage.setItem('orderPath1','0')
  }else {
    //用于跳转页面
    localStorage.setItem('orderPath','0')
    if(row.trade_from == '员工'){
      router.push(`/order/addOrder?path=3&id=${row.order_group_uid}`)
    }else {
      router.push(`/order/treatment?path=1&id=${row.order_no}`)
    }
  }
}
// 售后订单跳转
const serviceOrder =(va:any)=>{
  if(va != null && va !=''){
    router.push(`/sales/salesDetails?path=3&uid=${va}`)
  }
}
// 详情
const particulars  = (row:any)=>{  //c_order_uid
  //用于跳转页面

  if(row.trade_from == '客户'){
    localStorage.setItem('orderPath2','0')
    router.push(`/order/treatment?path=2&id=${row.c_order_uid}`)
  }else {
    if(row.type == 3){
      localStorage.setItem('orderPath1','0')
      router.push(`/order/quickOrder?path=1&id=${row.order_group_uid}`)
    }else {
      localStorage.setItem('orderPath','0')
      router.push(`/order/addOrder?path=5&id=${row.order_group_uid}`)
    }
  }


}
//变更
const upData=()=>{
  if(radioIndex.value){
    if(radioIndex.value.type == 3){
      //用于跳转页面
      localStorage.setItem('orderPath1','0')
      router.push(`/order/quickOrder?path=2&id=${radioIndex.value.order_group_uid}`)
    }else {
      //用于跳转页面
      localStorage.setItem('orderPath','0')
      // router.push(`/order/addOrder?path=3&id=${radioIndex.value.order_group_uid}`)
      if(radioIndex.value.trade_from == '员工'){
        router.push(`/order/addOrder?path=3&id=${radioIndex.value.order_group_uid}`)
      }else {
        router.push(`/order/treatment?path=1&id=${radioIndex.value.c_order_uid}`)
      }
    }

  }else {
    ElMessage.warning(`请先选择订单`)
  }

}
// 单选
const handleRadio = (row: any) => {
  // if(row.status == 5) return
  // radioIndex.value = row
  if (radioIndex.value && radioIndex.value.uid == row.uid  )  {
    radioIndex.value = undefined
    return
  }
  radioIndex.value = row
}
let multipleDate = reactive([])
// 多选
const handleSelectionChange = (val: any, va: any) => {
  multipleDate = val
  // multipleDate1 = val
}
// 获取列表
const getOrderList =async (value:object = {},type=0)=>{
  loading.value=true
  await orderList({from:'list',page:currentPage.value,pagesize:pageSize.value,...value}).then((data:any)=>{
    if(data.code == 200){
      loading.value=false
      count_number.value =  data.data.count
        customer_order_list.value = data.data.list
      if(type==1){
        ElMessage.success(`查询成功`)
      }else if(type == 2){
        ElMessage.success(`重置成功`)
      }
    }
  })
}
// *******新建****************
const create=()=>{
  orderSelectRef.value.dialogVisibles = true
}
// 订单状态

// 查询重置
const inquiry = (va:any)=>{
  const data = {
    order_group_uid:va.order_group_uid,
    uid: va.uid,
    status:va.status.toString(),
    stock_out_uid:va.stock_out_uid.toString(),
    warehouse_no:va.warehouse_no.toString(),
    type:va.type.toString(),
    goods_name: va.goods_name.toString(),
    goods_no: va.goods_no.toString(),
    sales_org_id: va.sales_org_id.toString(),
    customer_uid:va.customer_uid.toString(),
    create_time_start: va.create_time && DateFormat(va.create_time[0],'YYYY-MM-DD'),
    create_time_end:va.create_time && DateFormat(va.create_time[1],'YYYY-MM-DD'),
    create_user_name: va.create_user_name.toString(),
    barcode:va.barcode.toString(),
  }
  radioIndex.value=undefined
  queryList.value = { ...queryList.value,...data}
  getOrderList(queryList.value,1)
}
const resetting = (va:any)=>{
  const data = {
    order_group_uid:va.order_group_uid,
    uid: va.uid,
    status:va.status.toString(),
    stock_out_uid:va.stock_out_uid.toString(),
    warehouse_no:va.warehouse_no.toString(),
    type:va.type.toString(),
    goods_name: va.goods_name.toString(),
    goods_no: va.goods_no.toString(),
    sales_org_id: va.sales_org_id.toString(),
    customer_uid:va.customer_uid.toString(),
    create_time_start: va.create_time && DateFormat(va.create_time[0],'YYYY-MM-DD'),
    create_time_end:va.create_time && DateFormat(va.create_time[1],'YYYY-MM-DD'),
    create_user_name: va.create_user_name.toString(),
    barcode:va.barcode.toString(),
  }
  queryList.value = { ...queryList.value,...data}
  radioIndex.value=undefined
  getOrderList(queryList.value,2)
}
// 复制
const copyList = ()=>{
  if(radioIndex.value){
    //用于跳转页面
    if(radioIndex.value.type == 3){
      localStorage.setItem('orderPath1','0')
      router.push(`/order/quickOrder?path=3&id=${radioIndex.value.order_group_uid}`)
    }else {
      localStorage.setItem('orderPath','0')
      orderGroupCopy({uid:radioIndex.value.order_group_uid}).then((data: any) => {
        if (data.code == 200) {
          router.push(`/order/addOrder?path=3&id=${data.data.uid}`)
        }
      })
    }
  }else {
    ElMessage.warning(`请先选择订单`)
  }
}
// 订单取消
const cancellation = ()=>{
  if(radioIndex.value  && radioIndex.value.status != '45'){
    ElMessageBox.confirm(
      `订单取消后无法执行后续操作，请确认是否取消 单据编号为：${radioIndex.value.uid || '--'}的订单。`,
      {
        confirmButtonText: '确定',
        cancelButtonText: '返回',
        type: 'warning',
      }
    )
      .then(() => {
        orderCancel({uid:radioIndex.value.uid}).then((data:any)=>{
          if (data.code == 200){
            radioIndex.value = undefined
            ElMessage.success(`取消成功`)
            getOrderList(queryList.value)
          }
        })
      })
  }else {
    ElMessage.warning(`请先选择正确订单`)
  }
}
// 订单排序
const sortList = ( column:any, prop:any, order:any )=>{
  if (column.order == null || column.order == "descending" ){
    queryList.value = { ...queryList.value,column:column.prop,direction:'asc'}
    getOrderList(queryList.value)
  }else if(column.order == "ascending"){
    queryList.value = { ...queryList.value,column:column.prop,direction:'desc'}
    getOrderList(queryList.value)
  }

}
const publicPopup = (type:any)=>{
  if(radioIndex.value && radioIndex.value.status != '45'){
    if(type == 1){
      if (radioIndex.value && radioIndex.value.status == '80' || radioIndex.value.status == '82'){
        takeOver.value.openUp = true
        takeOver.value.uid =radioIndex.value.uid
        takeOver.value.type = 1
      }else if(radioIndex.value && radioIndex.value.status == '100'){
        ElMessage({
          message: '已完成的订单无需再次进行确认收货',
          type: 'warning',
        })
      }else {
        ElMessage({
          message: '该订单状态不允许确认收货',
          type: 'warning',
        })
      }
    } else if(type == 2){
      setAddress.value.openUp = true
      setAddress.value.uidList =radioIndex.value
    }

  }else {
    ElMessage.warning(`请先选择正确订单`)
  }

}

//确认收货地址
const addressSubmit =(va:any)=>{
  radioIndex.value = undefined
  getOrderList(queryList.value)
}
// 回传状态
const syncStatus = (value:any)=>{
  if(value==0){
    return '待回传'
  }else if(value==1){
    return '回传成功'
  }else if(value==2){
    return '回传失败'
  }else {
    return '--'
  }
}
onActivated(()=>{
  getOrderList(queryList.value)
  radioIndex.value = null
})
</script>

<style lang="scss" scoped>
@import "../index";

</style>
